<template>
	<div class="UpdateInfo">
		<el-form ref="form" :model="usr" label-width="80px"  :rules="rules"   class="demo-ruleForm">
		  <el-form-item label="姓名" prop="name">
		    <el-input v-model="usr.name"></el-input>
		  </el-form-item>
		 <el-form-item label="电话号码" prop="phone">
		   <el-input v-model="usr.phone"></el-input>
		 </el-form-item>
		 <el-form-item label="地址" prop="addr">
		   <el-input v-model="usr.addr"></el-input>
		 </el-form-item>
		</el-form>
		<button @click="update()">更改信息</button>
	</div>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	export default{
		name:'UpdateInfo',
		data() {
			var check = (rule, value, callback) => {
			        if (!value) {
			          return callback(new Error('不能为空'));
			        }
			      };
				  var checkPhone = (rule, value, callback) => {
				          if (!value) {
				            return callback(new Error('手机号不能为空'));
				          }
						  // var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
						  if (value.trim().length<11) {
						    return callback(new Error('手机号格式不正确'));
						  }
				        };
			return{
				usr:{},
				rules: {
				         name: [
				            { validator: check, trigger: 'blur' }
				         ],
						  phone: [
						   { validator: checkPhone, trigger: 'blur' }
						  ],
						  addr: [
							{ validator: check, trigger: 'blur' }
						 ],
				        
				      }
			}
		},
		methods:{
			...mapActions(['setUser']),
			update(){
				let obj = {
					nickname:this.usr.name,
					phone:this.usr.phone,
					addr:this.usr.addr,
				}
				console.log(obj);
				this.$postkv('/api/user/updateShip',obj).then((resp)=>{
					this.setUser({
						name:obj.nickname,
					})
					this.$message({
						message:resp.data.msg,
						type:'success',
					})
				})
			}
			
		},
		mounted() {
			this.$get('/api/user/shipInfo').then((resp)=>{
				console.log(resp.data.data);
				this.usr =resp.data.data; 
			})
		}
	}
</script>

<style scoped>
	.UpdateInfo{
		width: 50%;
		margin: 20px auto;
		text-align: center;
	}
	.UpdateInfo button{
		width: 150px;
		height: 30px;
		background-color: deepskyblue;
		color: white;
		border: none;
		outline: none;
		border-radius: 5px;
	}
</style>